<template>
  <div class="s-tab-table-wrapper">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="tabChange"
    >
      <el-tab-pane
        v-for="(tab,index) in tabData"
        :key="index"
        :label="tab.label"
        :name="tab.value"
      >
        <div
          class="s-tab-table-container"
          v-if="tableData && tableData.length != 0"
        >
          <table-view
            :tableData="tab.tableData"
            :cols="tab.cols"
            :showPaginator="showPaginator"
            :pageNumber="currentPage"
            :pageSize="size"
            :totalRecords="totalRecords"
            :showOperate="tab.showOperate"
            @size-change="handleSizeChange"
            @current-page-change="handlePageChange"
            @prev-click="handlePageChange"
            @next-click="handlePageChange"
            @on-detail="showDetail"
          >
          </table-view>
        </div>
        <div
          class="s-empty-data"
          v-if="!tableData || (tableData && tableData.length == 0)"
        >
          暂无数据~
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TableView from '../TableView/TableView.vue'
export default {
  components: { TableView },
  name: 'TabTable',
  props: {
    tabs: {      type: Array, default: function () {
        return [];
      }    },
    activeTab: String,
    pageNumber: { type: Number, default: 1 },
    pageSize: { type: Number, default: 10 },
    showPaginator: { type: Boolean, default: false },
    lazy: { type: Boolean, default: false }  //是否是后台分页，默认前台分页
  },
  data: function () {
    return {
      tabData: [],
      activeName: null,
      totalData: [],
      tableData: [],
      currentPage: 1,
      size: 10,
      totalRecords: 0
    }
  },
  watch: {
    tabs: {
      handler: function (val) {
        if (val != null && val != undefined && val != '') {
          this.tabData = val;
          if (this.activeName != null && this.activeName != undefined && this.activeName != '') {
            this.initTable(val);
          }
        } else {
          this.tabData = [];
        }
      },
      immediate: true,
      deep: true
    },
    pageNumber: {
      handler: function (val) {
        val && (this.currentPage = val);
      },
      immediate: true
    },
    pageSize: {
      handler: function (val) {
        val && (this.size = val);
      },
      immediate: true
    },
    activeTab: {
      handler: function (val, oldVal) {
        if (val != null && val != undefined && val != '') {
          this.activeName = val;
          if (this.tabData != null && this.tabData != undefined && this.tabData != '') {
            this.initTable(this.tabData)
          }
        } else {
          this.activeName = null;
        }
      },
      immediate: true
    }
  },
  mounted: function () {

  },
  methods: {
    initTable(val) {
      if (this.isEmpty(this.activeName) || this.activeName == '' || this.activeName == '0') {
        return;
      }
      let data = null;
      val.forEach((d) => {
        d.value == this.activeName && (data = d);
      })

      if (data.tableData) {
        if (this.lazy) {
          this.tableData = [];
          this.tableData = data.tableData;
          this.totalRecords = data.total;
        } else {
          this.totalData = data.tableData;
          this.totalRecords = data.tableData.length;
          this.getRealTableData();
        }
        // console.log('initTable',data);
      }
    },
    tabChange(tab) {
      this.tabData.forEach((data) => {
        if (data.value == tab.name) {
          this.currentPage = 1;
          if (this.lazy) {
            this.$emit('on-tab-change', tab.name);
          } else {
            this.totalData = data.tableData;
            this.totalRecords = data.tableData.length;
            this.getRealTableData();
          }
        }
      })
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.size = size;
      if (this.lazy) {
        this.$emit('on-size-change', { pageSize: this.size, pageNumber: this.currentPage });
      } else {
        this.getRealTableData();
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
      if (this.lazy) {
        this.$emit('on-page-change', { pageSize: this.size, pageNumber: this.currentPage });
      } else {
        this.getRealTableData();
      }
    },
    getRealTableData() {
      this.tableData = this.totalData.slice((this.currentPage - 1) * this.size, this.currentPage * this.size);
    },
    showDetail(e) {
      this.$emit('on-detail', e);
    }
  },
  destroyed: function () {

  }
}
</script>

<style   rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.s-tab-table-wrapper {
}
</style>

